import { BaseCommand } from '@amcax/base';
import { useEffect, useRef } from 'react';
import CenterPointArcRabbetCmdInteractor from './CenterPointArcRabbetCmdInteractor';
import ThreePointsArcRabbetCmdInteractor from './ThreePointsArcRabbetCmdInteractor';
import { ArcRabbetCommandProps } from './types';

function CenterPointArcRabbetCommand({ onClose }: ArcRabbetCommandProps) {
  const cmdRef = useRef<CenterPointArcRabbetCmdInteractor>(null);
  useEffect(() => {
    cmdRef.current = new CenterPointArcRabbetCmdInteractor();
    cmdRef.current.addExit(onClose);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  });
  return <></>;
}

export const cmdCenterPointArcRabbet: BaseCommand = {
  id: 'CmdCenterPointArcRabbet',
  label: 'command.center-point-arc-rabbet',
  icon: 'commands/sketch/center-point-arc-rabbet',
  group: 'sketch',
  create: function (_, onClose: () => void) {
    return <CenterPointArcRabbetCommand onClose={onClose} />;
  },
};

function ThreePointArcRabbetCommand({ onClose }: ArcRabbetCommandProps) {
  const cmdRef = useRef<ThreePointsArcRabbetCmdInteractor>(null);
  useEffect(() => {
    cmdRef.current = new ThreePointsArcRabbetCmdInteractor();
    cmdRef.current.addExit(onClose);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  });
  return <></>;
}

export const cmdThreePointArcRabbet: BaseCommand = {
  id: 'CmdThreePointsArcRabbet',
  label: 'command.three-point-arc-rabbet',
  icon: 'commands/sketch/three-point-arc-rabbet',
  group: 'sketch',
  create: function (_, onClose: () => void) {
    return <ThreePointArcRabbetCommand onClose={onClose} />;
  },
};
